<!-- src/routes/login/+page.svelte -->
<script lang="ts">
	import { enhance } from '$app/forms';
	import type { loginForm } from '$lib/api/types/user';


	let loginData: loginForm = {
		account: '',
		password: ''
	};
</script>

<div class="login-container">
	<h1>登录</h1>

	<form method="POST" use:enhance>
		<div class="form-group">
			<label for="account">用户名:</label>
			<input
				required
				type="text"
				id="account"
				name="account"
				bind:value={loginData.account}
			/>
		</div>

		<div class="form-group">
			<label for="password">密码:</label>
			<input			
				type="password"
				id="password"
				name="password"
				bind:value={loginData.password}
				required
			/>
		</div>

		<button type="submit">
			登录
		</button>
	</form>
</div>

<style>
	.login-container {
		width: 500px;
		margin: 2rem auto;
		padding: 2rem;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.form-group {
		margin-bottom: 1.5rem;
	}

	label {
		display: block;
		margin-bottom: 0.5rem;
		font-weight: 500;
	}

	input {
		width: 100%;
		padding: 0.75rem;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box;
	}

	button {
		width: 100%;
		padding: 0.75rem;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 1rem;
	}

	button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	button:hover:not(:disabled) {
		background-color: #0056b3;
	}
</style>
